<template>
    <div class="project-table">
        <table>
            <thead>
                <tr>
                    <th>项目名称</th>
                    <th>状态</th>
                    <th>优先级</th>
                    <th>进度</th>
                    <th>截止日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in total_projects" :key="item.id">
                    <td><Card2 :title="item.name" :subTitle="item.discription" icon="/icon/dir.svg"></Card2></td>
                    <td><Tab1 w="3.5vw" h="1.5vw" :text="item.status" fs="0.8vw" :tc="item.status_tc" :bg="item.status_bg" margin="0 0 0 0.5vw"></Tab1></td>
                    <td><Tab1 w="fit-content" h="1.5vw" :text="item.priority" fs="0.8vw" margin="0 0 0 1vw" padding="0 0.5vw"></Tab1></td>
                    <td><Progress1 :value="item.progress" tc="#02b658" bg="#aaa"></Progress1></td>
                    <td>{{ item.deadline }}</td>
                    <td>查看详情</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import Card2 from '@/components/card/Card2.vue';
import Tab1 from '@/components/tab/Tab1.vue';
import Progress1 from '@/components/progress/Progress1.vue';

// 项目状态 - 为了未来数据库做准备
const proj_status = [
    {
        id: 1,
        name: '进行中',
        tc: 'rgb(133, 77, 14)',
        bg: 'rgb(254, 249, 195)',
    },
    {
        id: 2,
        name: '已完成',
        tc: 'rgb(22, 101, 52)',
        bg: 'rgb(220, 252, 231)'
    },
    {
        id: 3,
        name: '已取消',
        tc: 'rgb(31, 41, 55)',
        bg: 'rgb(243, 244, 246)'
    },
];

let total_projects = [
    {
        id: 1,
        name: '项目1',             // 项目名称
        discription: '项目描述1',   // 项目描述
        status: '进行中',          // 项目状态     进行中、已完成、已取消
        status_tc: 'rgb(133, 77, 14)',
        status_bg: 'rgb(254, 249, 195)',
        priority: '低',            // 项目优先级   低、中、高、紧急
        progress: '50%',           // 开发进度     0% - 100%
        deadline: '2026-01-01',    // 截止时间     YYYY-MM-DD
    },
    {
        id: 2,
        name: '项目2',
        discription: '项目描述2',
        status: '已取消',
        status_tc: 'rgb(31, 41, 55)',
        status_bg: 'rgb(243, 244, 246)',
        priority: '紧急',
        progress: '90%',
        deadline: '2025-11-15',
    },
    {
        id: 3,
        name: '项目3',
        discription: '项目描述3',
        status: '已完成',
        status_tc: 'rgb(22, 101, 52)',
        status_bg: 'rgb(220, 252, 231)',
        priority: '中',
        progress: '100%',
        deadline: '2025-12-01',
    },
    {
        id: 4,
        name: '项目4',
        discription: '项目描述4',
        status: '进行中',
        status_tc: 'rgb(133, 77, 14)',
        status_bg: 'rgb(254, 249, 195)',
        priority: '高',
        progress: '3%',
        deadline: '2025-11-24',
    },
];
</script>

<style scoped lang="less">
.project-table {
    width: 100%;
    height: 35vw;
    overflow-y: auto;
    box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.1);
    border-radius: 0.5vw;

    table {
        width: 100%;
        border-collapse: collapse;

        thead {
            height: 3vw;
            border-bottom: 0.1vw solid #e6e7ea;
            background-color: #f9fafb;

            th {
                padding: 1vw;
                font-size: 0.8vw;
                text-align: left;
                color: rgb(107, 114, 128);
            }
        }

        tbody {
            background-color: #fff;
        }
    }
}
</style>